// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const datetimeElement = document.querySelector('.bottom-right-datetime');
    // 初始创建日期和时间元素，避免后续频繁替换innerHTML
    const dateElement = document.createElement('div');
    dateElement.className = 'date';
    const timeElement = document.createElement('div');
    timeElement.className = 'time';
    datetimeElement.appendChild(dateElement);
    datetimeElement.appendChild(timeElement);

    // 根据时间计算颜色的函数 - 优化灰色背景上的可读性
    function getColorByTime(hours, minutes, seconds) {
        // 计算一天中的总秒数
        const totalSecondsInDay = 24 * 60 * 60;
        const currentSeconds = hours * 60 * 60 + minutes * 60 + seconds;
        // 计算时间比例 (0-1)
        const timeRatio = currentSeconds / totalSecondsInDay;

        // 优化灰色背景上的颜色过渡
        // 从亮青色(色相180)过渡到暖橙色(色相30)，这些颜色在灰色背景上更鲜明
        const hue = 180 - (timeRatio * 150);
        // 保持高饱和度
        const saturation = 80 + (timeRatio * 10); // 80% -> 90%
        // 提高亮度，确保在灰色背景上清晰可见
        const lightness = 60 - (timeRatio * 15); // 60% -> 45%

        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
    }

    // 更新日期时间函数
    function updateDateTime() {
        const now = new Date();

        // 格式化日期
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const weekDay = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];

        // 格式化时间
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        // 只更新文本内容，不替换整个元素
        dateElement.textContent = `${year}年${month}月${day}日 ${weekDay}`;
        timeElement.textContent = `${hours}:${minutes}:${seconds}`;

        // 设置颜色
        const color = getColorByTime(parseInt(hours), parseInt(minutes), parseInt(seconds));
        timeElement.style.color = color;
        // 增强文字阴影，提高在灰色背景上的可读性
        timeElement.style.textShadow = `0 0 10px ${color}aa, 0 0 5px rgba(255, 255, 255, 0.5)`;
    }

    // 初始更新
    updateDateTime();

    // 每秒更新一次
    setInterval(updateDateTime, 1000);
});